﻿
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>test</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/jquery.gritter.css"  rel="stylesheet" type="text/css"/>
    <style>
      .connected-dot{border-radius:3px;background-color:red;width: 8px;height: 8px;margin-right:3px;margin-top:6px;display:inline-block;}
      .m1{margin-top:4px;margin-right:4px;}
      .navbar-fixed-top .brand {
        padding-right: 0;
        padding-left: 0;
        margin-left: 20px;
        float: right;
        font-weight: bold;
        color: black;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .125);
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        transition: all .2s linear;
      }
      .nav{
        font-family: "微软雅黑", Arial, "MS Trebuchet", sans-serif;
      }
    </style>
  </head>
  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href>PDM</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href>用户</a></li>
              <li class=""><a href>游戏区</a></li>
            </ul>
            <ul class="nav pull-right">
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="icon-user icon-white m1"></i><span class="label label-success">able</span> <b class="caret"></b>
                </a>
                <ul id="menu2" class="dropdown-menu">
                  <li><a href="#" onclick="ut();">change password</a></li>
                  <li class="divider"></li>
                  <li><a href="#">logout</a></li>
                </ul>
              </li>
              <li class="divider-vertical"></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <span id="lbLink" class="connected-dot"></span> link 1 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">link 2</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

    </div>

    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="/js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="/js/bootstrap-alert.js"></script>
    <script type="text/javascript" src="/js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="/js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="/socket.io.js"></script>
    <script type="text/javascript" src="/js/jquery.gritter.js"></script>
    <script>
        $(function(){

          var socket = io.connect('http://127.0.0.1:8000/g1');
          socket.on('connect', function (o) {
            $('#lbLink').css("background-color","#468847");
            $.gritter.add({text: '<span style="color:#468847;"><strong>server connected!</strong></span>', image: '/images/ok.png'});
            alert(o);
          });

          socket.on('disconnect', function () {
            $('#lbLink').css("background-color","#b94a48");
            $.gritter.add({text: '<span style="color:#b94a48;"><strong>server disconnected!</strong></span>', image: '/images/ex.png', sticky: true});
          });

          socket.on('message', function (msg) {
            $.gritter.add({text: '<span style="color:#468847;"><strong>'+msg+'</strong></span>', image: '/images/info.png'});
          });

          $('#btnSend').click(function (ev) {
              socket.emit('authorize', $('#nick').val());
              return false;
          });
        });


    </script>

  </body>
</html>









